<template>
	<view class="index">
		<!-- 头部组件 -->
		<view class="topbar">
			<view>
				<NavBar title="互动中心">
					<template #right>
						<view class="topRight">
							发出评论
							<image src="/static/img/index/86.png" mode="widthFix"></image>
						</view>
					</template>
				</NavBar>
			</view>
		</view>
		<view class="wallIList">
			<view class="wallItem">
				<view class="flex1">
					<view class="userInfo">
						<view class="leftMsg">
							<img :src="contentObj.ima" class="img1" />
							<view class="oneText">
								<view class="title">{{contentObj.yhm}}</view>
								<view class="time">发布于 {{contentObj.fbsj}}</view>
							</view>
						</view>
						<view class="text">{{contentObj.text}}</view>
					</view>
					<img class="userInfoImg" :src="contentObj.fbtp"></img>
				</view>
				
				<!-- 此处追加评论，循环增减contentObj中的一个数组即可，这里没做定义，是写死的 -->
				
				<view class="bottomContent">
					<view class="leftImgBox">
						<img :src="contentObj.fbtp" alt="" />
					</view>
					<view class="rightDetail">
						<view class="accountName">
							本账号
						</view>
						<view class="plContent">
							但是你这个真的好可爱，感觉就像动漫里干干净净的小和尚
						</view>
						<view class="accountName">
							5分钟前 云南
						</view>
					</view>
				</view>
				<view class="readditionPl">
					<view class="inputCotent">
						<img src="@/static/img/bi.png" alt="" />
						<input type="text" placeholder="追加评论" />
					</view>
					<view class="readditionPlBtn">
						发送
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import NavBar from '@/components/navBar.vue'
	const contentObj = ref(
		{
			ima: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', yhm: "我是风车车", fbsj: '2024-10-23', followStatus: 0, text: '这是一段emo', dz: 321, dzStatus: 0, pl: '120', fbtp: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
		},
	)
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-color: #f4f6fa;
		position: relative;

		.topbar {
			width: 100%;
			height: 431rpx;
			background-image: url('@/static/img/wdqqbj.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

		}

		.wallIList {
			position: absolute;
			width: 100%;
			top: 120rpx;
			height: calc(100vh - 120rpx);
			overflow-y: scroll;
			padding: 32rpx 24rpx 0;

			.wallItem {
				// width: 702rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				// margin-bottom: 24rpx;
				padding: 32rpx 24rpx;
			}
		}
	}

	.topRight {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		image {
			width: 36rpx;
			margin-left: 8rpx;
		}

	}

	:deep(.navBarTop) {
		background-color: transparent;
	}

	.img1 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.img2 {
		width: 210rpx;
		height: 210rpx;
		border-radius: 24rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.img2Mar {
		margin-right: 0;
	}

	.img3 {
		width: 3vh;
		height: 3vh;
		margin-right: 1vw;
	}


	.flex1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 200rpx;
		border-bottom: 2rpx solid #F4F6FA;
		padding-bottom: 32rpx;

		.userInfo {
			display: flex;
			flex-direction: column;
			height: 180rpx;

			.leftMsg {
				display: flex;
				align-items: center;
			}
		}

		.userInfoImg {
			width: 180rpx;
			height: 180rpx;
		}

	}

	.bottomContent {
		min-height: 180rpx;
		margin: 32rpx 0rpx;
		display: flex;
		align-items: flex-start;

		.leftImgBox {
			width: 80rpx;

			img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
			}
		}

		.rightDetail {
			flex: 1;

			.accountName {
				height: 36rpx;
				font-size: 24rpx;
				color: #8C8C8C;
			}

			.plContent {
				min-height: 84rpx;
				margin: 12rpx 0px;
			}
		}
	}

	.readditionPl {
		height: 88rpx;
		display: flex;
		justify-content: space-between;

		.inputCotent {
			display: flex;
			align-items: center;
			flex: 1;
			background: #F5F5F5;
			border-radius: 32rpx;
			padding-left: 25rpx;

			img {
				margin-right: 17rpx;
				width: 22rpx;
				height: 22rpx;
			}

			input {
				flex: 1;
			}
		}

		.readditionPlBtn {
			width: 120rpx;
			height: 88rpx;
			margin-left: 32rpx;
			background: #6B64D3;
			border-radius: 32rpx;
			text-align: center;
			line-height: 88rpx;
			color: #FFFFFF;
		}
	}

	.title {
		font-weight: 900;
		font-size: 32rpx;
		color: #262626;
	}

	.time {
		font-weight: normal;
		font-size: 28rpx;
		color: #8C8C8C;
	}

	.text {
		margin: 24rpx 0;
		font-weight: 700;
		font-size: 28rpx;
		color: #262626;
	}
</style>